<template>
  <div class="content-page-02" ref="contentPage02">
    <div class="center" ref="center" id="content-page-02-parallax">
      <!-- 切换按钮 -->
      <div class="layer" data-depth="0.08">
        <img class="button1" :class="{active: itemActiveIndex == 0}" @click="buttonClick(0)" src="../../../assets/images/basketball.png" alt="">
        <span class="text1">P1</span>
        <img class="button2" :class="{active: itemActiveIndex == 1}" @click="buttonClick(1)" src="../../../assets/images/basketball.png" alt="">
        <span class="text2">P2</span>
        <img class="button3" :class="{active: itemActiveIndex == 2}" @click="buttonClick(2)" src="../../../assets/images/basketball.png" alt="">
        <span class="text3">P3</span>
      </div>
      <!-- 图表区域 -->
      <div class="layer" data-depth="0.05">
        <img class="hole" src="../../../assets/images/hole.png" alt="">
        <img class="hole2" src="../../../assets/images/hole.png" alt="">
        <my-echart-cloud v-if="itemActiveIndex == 0" ref="myEchartCloud" />
        <my-echart-relational v-if="itemActiveIndex == 1" ref="myEchartRelational" />
        <my-echart-sunburst v-if="itemActiveIndex == 2" ref="myEchartSunburst" />
      </div>

      <div class="layer" data-depth="0.15">
        <img class="stands" src="../../../assets/images/stands.png" alt="">
      </div>
      <div class="layer" data-depth="0.1">
        <img class="leaf" src="../../../assets/images/leaf.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Parallax from 'parallax-js'
import axios from 'axios'

import myEchartCloud from '../my_echarts_cloud/my_echarts_cloud.vue'
import myEchartRelational from '../my_echarts_relational/my_echarts_relational.vue'
import myEchartSunburst from '../my_echarts_sunburst/my_echarts_sunburst.vue'

import getImg from '../my_echarts_cloud/js/getImg'

export default {
  name: "content-page-02",
  components: {
    myEchartCloud,
    myEchartRelational,
    myEchartSunburst
  },
  data() {
    return {
      itemActiveIndex: 0,
      data: null,
      maskResource: null // 存储子组件的图片信息
    }
  },
  mounted() {
    let scene = document.getElementById('content-page-02-parallax');
    let parallax = new Parallax(scene);

    let w_height = window.innerHeight < 920 ? 920 : window.innerHeight;
    this.$refs.contentPage02.style.height = w_height + "px"; // 让 canvas 高度自适应
    this.$refs.center.style.height = w_height + "px";

    this.getData();
    // 预读取图片对象（base64 格式）
    this.maskResource = new Image(); //新建一个图片对象
    this.maskResource.src = getImg();
  },
  methods: {
    async getData() {
      await axios.get('data/data.json').then((res) => {
        this.data = res.data;
        this.$refs.myEchartCloud.getData(res.data, this.maskResource);
      }).catch((err) => {
        console.log(err);
      })
    },
    buttonClick(index) {
      this.itemActiveIndex = index;
      // 通知子组件重新渲染
      if(index == 0) {
        this.$nextTick(() => this.$refs.myEchartCloud.getData(this.data, this.maskResource))
      } else if(index == 1) {
        this.$nextTick(() => this.$refs.myEchartRelational.getData(this.data))
      } else if(index == 2) {
        this.$nextTick(() => this.$refs.myEchartSunburst.getData(this.data))
      }
    }
  }
}
</script>

<style scoped>
  .content-page-02 {
    width: 100%;
    height: 920px;
    background: url("../../../assets/images/content_bg02.jpg") center no-repeat;
    border-radius: 10px;
    overflow: hidden;
    caret-color: transparent; /* 去除光标颜色 */
  }

  .center {
    width: 1280px;
    height: 920px;
    margin: 0 auto;
    padding: 30px;
    font-size: 28px;
    color: #fff8;
    font-weight: 800;
    position: relative;
    box-sizing: border-box;
  }

  .layer {
    width: 100%;
    pointer-events: auto;
  }

  .hole {
    width: 36px;
    position: absolute;
    top: 176px;
    left: 420px;
    z-index: 10;
  }

  .hole2 {
    width: 36px;
    position: absolute;
    top: 176px;
    left: 860px;
    z-index: 10;
  }

  .button1, .button2, .button3 {
    width: 72px;
    position: absolute;
    transform: scale(0.9);
    transition: 0.5s;
    cursor: pointer;
    opacity: 0.5;
  }

  .text1, .text2, .text3 {
    transform: scale(0.9);
    transition: 0.5s;
  }

  .active {
    opacity: 1;
  }

  .active + span {
    color: #fff;
  }

  .button1 {
    top: 0;
    left: 400px;
  }

  .button1:hover {
    transform: rotate(50deg) scale(1);
    opacity: 1;
  }

  .button1:hover + .text1 {
    color: #fff;
    transform: scale(1);
  }

  .text1 {
    position: absolute;
    top: 80px;
    left: 416px;
  }

  .button2 {
    top: 0;
    left: 600px;
  }

  .button2:hover {
    transform: rotate(50deg) scale(1);
    opacity: 1;
  }

  .button2:hover + .text2 {
    color: #fff;
    transform: scale(1);
  }

  .text2 {
    position: absolute;
    top: 80px;
    left: 616px;
  }

  .button3 {
    top: 0;
    left: 800px;
  }

  .button3:hover {
    transform: rotate(50deg) scale(1);
    opacity: 1;
  }

  .button3:hover + .text3 {
    color: #fff;
    transform: scale(1);
  }

  .text3 {
    position: absolute;
    top: 80px;
    left: 816px;
  }

  .stands {
    width: 450px;
    position: absolute;
    top: -40px;
    left: -380px;
  }

  .leaf {
    width: 220px;
    position: absolute;
    top: -60px;
    right: -360px;
  }
</style>